import { mockNestedData } from "@/mock/nestedData";
import { Description } from "@/components/Descrption";
import { useDescription } from "@/components/Descrption/src/useDescription";
import { DescItem } from "@/components/Descrption/src/typing";
import { Tag, Flex } from "antd";
import { ProUploadPicture } from "@/components/ProComponents";

function MineHappit() {
  // 详情配置
  const detailSchema: DescItem[] = [
    {
      label: "医疗机构",
      field: "orgName",
      span: 1,
      show: (data) => true,
    },
    {
      label: "检查机构",
      field: "checkOrgName",
      span: 1,
    },
    {
      label: "详细地址",
      field: "address",
      span: 2,
    },
    {
      label: "信息标签",
      field: "infoList",
      span: 2,
      render(value, data) {
        return (
          <Flex gap="4px 0" wrap>
            {value.map((item, index) => (
              <Tag color={getTagColor(index)} key={item}>
                {item}
              </Tag>
            ))}
          </Flex>
        );
      },
    },
    {
      label: "预约日期",
      field: "checkDate",
      span: 1,
    },
    {
      label: "预约人",
      field: "name",
      span: 1,
    },
    {
      label: "身份证号",
      field: "cardId",
      span: 1,
      contentMinWidth: 300,
    },
    {
      label: "联系电话",
      field: "mobile",
      span: 1,
      render(val, data) {
        return (
          <>
            <span style={{ color: "red" }}>"{val}"</span>
          </>
        );
      },
    },
  ];

  //获取tag颜色
  const getTagColor = (index: number): string => {
    switch (index) {
      case 0:
        return "magenta";
      case 1:
        return "volcano";
      case 2:
        return "gold";
      default:
        return "blue";
    }
  };

  const data = {
    orgName: "测试机构",
    checkOrgName: "测试检查机构",
    address: "测试详细地址",
    checkDate: "2022-01-01",
    infoList: ["有病", "没病", "潦草的"],
    name: "测试预约人",
    cardId: "测试身份证号",
    mobile: "1999999999999",
  };

  const { register: register1 } = useDescription({
    schema: detailSchema,
    data,
    title: "基本信息",
    column: 2,
    labelStyle: { minWidth: "250px" },
    contentStyle: { minWidth: "300px" },
  });

  const schema = [
    { label: "姓名", field: "name", labelMinWidth: 100 },
    { label: "年龄", field: "age" },
    {
      label: "邮箱",
      field: "email",
      render: (value) => <a href={`mailto:${value}`}>{value}</a>,
    },
    { label: "地址", field: "address", span: 2, show: (data) => data.address },
  ];

  const dataSource = {
    name: "张三",
    age: 28,
    email: "zhangsan@example.com",
    address: "北京市海淀区",
  };

  const { register: register2 } = useDescription({
    schema: schema,
    data: dataSource,
    title: "基本信息",
    column: 2,
    labelStyle: { minWidth: "250px" },
    contentStyle: { minWidth: "300px" },
  });

  return (
    <>
      <div>
        我的爱好
        <div>
          <Description ref={register1} />
        </div>
        <div className="mb-2">
          <Description ref={register2} />
        </div>
        <div>
          <ProUploadPicture />
        </div>
      </div>
    </>
  );
}

export default MineHappit;
